// 登录按钮
const btnLogin = document.querySelector('#btn-login')

// 切换显示隐藏密码按钮
const togglePass = document.querySelector('#togglePass')

// 同意协议复选框
const agree = document.querySelector('#agree')

// 协议的 错误提示
const agreeErrorMsg = document.querySelector('.agreeMsg')

// 手机号 -- 属性选择器
const phone = document.querySelector('[name=phone]')

// 密码框
const password = document.querySelector('[name=password]')

// 滑块
const line = document.querySelector('.line')

// tab栏
const tabs = document.querySelectorAll('.el-tabs__item')
// tab内容面板
const tabPanes = document.querySelectorAll('.el-tab-pane')

tabs.forEach((tab, index)=> {
  tab.addEventListener('click', function() {
    // 文字颜色变蓝色 -- 添加active类 → 谁加类？ → 点的这个标签
    document.querySelector('.active').classList.remove('active')
    this.classList.add('active')

    // 蓝色线的 位置和width都要变化 left位置要和文字位置相同
    // 获取文字的位置 设置给left值 → offsetLeft → 找到 点击的div 里面的span 的offsetLeft
    line.style.left =  this.querySelector('span').offsetLeft +'px'
    line.style.width = this.querySelector('span').offsetWidth + 'px'
    // 可以从某个标签对象开始查找里面的元素
    // console.log(this.querySelector('span'))

    // 底部内容切换 - 点哪个菜单，显示对应的内容div -- 在tabPanes伪数组里面找到这个菜单对应添加show
    // 两个选择器连着写 表示两个筛选条件筛选同一个标签 → 这两个类名在一个标签上面生效
    document.querySelector('.el-tab-pane.show').classList.remove('show')
    tabPanes[index].classList.add('show')
  })
})

// todo 登录功能 - 手机号 + 密码 + 勾选协议 → 跳转到首页
// 失去焦点值变化的时候需要校验-正则
// 定义函数校验每个输入框是否合法
// function fn() {
//   if (正则校验失败) {
//     return false
//   }
//   return true
// }

// 校验手机号的函数
// 校验手机号
const regPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
function verifyPhone () {
  if (!regPhone.test(phone.value)) {
    // console.log('校验失败')
    phone.nextElementSibling.innerHTML = '请输入正确的手机号'
    return false
  }

  // console.log('校验成功')
  
  phone.nextElementSibling.innerHTML = ''
  return true
}

phone.addEventListener('change', verifyPhone)

// 校验密码
function verifyPassword () {
  if (password.value != 'admin123') {
    password.nextElementSibling.innerHTML = '请输入正确的密码~'
    return false
  }

  password.nextElementSibling.innerHTML = ''
  return true
}


password.addEventListener('change', verifyPassword)

// 单击登录按钮：如果手机号正则校验是通过的true ， 且 密码校验通过 true 且 协议框是勾选的 → 跳转页面到首页
// button标签type属性值是button → 普通按钮： 没有任何功能 → 事件是click
// button标签没有type属性，默认就是submit按钮（提交按钮） → 给form标签注册 submit 事件 → 注意：要组织表单的默认提交行为
btnLogin.addEventListener('click', function () {
// 先判断协议是否勾选了 -没有勾选提示错误信息 → return ： 发现如果手动勾选应该隐藏错误信息
if (!agree.checked) {
  agreeErrorMsg.innerHTML = '没有勾选协议是不行滴'
  return
}

  // if (手机号正则校验是通过的true ， 且 密码校验通过 true 且 协议框是勾选的) {
  if (verifyPhone() && verifyPassword() && agree.checked==true) {
    location.href = './index.html'
  }
})

agree.addEventListener('click', function () {
  // agreeErrorMsg.innerHTML = ''
  agreeErrorMsg.innerHTML = agree.checked ? '' : '没有勾选协议是不行滴'
})


// 显示和隐藏  密码
// 要么显示密码 要么加密密码 就两个状态的 大多数跟 布尔值有关系
// 睁眼：图标要换 icon-eye-close；能看见用户输入的密码文字 输入框 text  -- true
// 闭眼：图标要换；密码文字是点点  输入框 password  -- false
let flag = false
togglePass.addEventListener('click', function () {
  flag = !flag
  if (flag) {
    // console.log('睁眼')
    password.type = 'text'
    togglePass.classList.remove('icon-eye-close')
  } else {
    // console.log('闭眼')
    password.type = 'password'
    togglePass.classList.add('icon-eye-close')
  }
})


